<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Responsive Bootstrap 4 Admin Template">
	<meta name="author" content="Bootlab">

	<title>AppStack - Responsive Admin Template</title>

	<link href="css/classic.css" class="js-stylesheet" rel="stylesheet">

</head>

<body>
	<div class="wrapper">

		<nav class="sidebar">
			<div class="sidebar-content ">
				<a class="sidebar-brand" href="index.html">
					<i class="align-middle" data-feather="command"></i>
					<span class="align-middle">供应链金融平台</span>
				</a>

				<ul id='sidebar-menu' class="sidebar-nav">
					<script id="script_menu" type="text/x-handlebars-template">

						{{#each menuitems}}
							<li class="sidebar-header">
								{{title}}
							</li>
							{{#if groups}}
								{{#each groups}}
									<li class="sidebar-item" {{#if ../actived }} active {{/if}}>
									 				 
										<a href="{{href}}" data-toggle="collapse" class="sidebar-link 	{{#if this.actived}} {{else}} collapsed {{/if}}">
											<i class="align-middle" data-feather={{icon}}></i> <span class="align-middle">{{title}}</span>
										</a>
								 
										{{#if items}}
											<ul id="{{id}}" class="sidebar-dropdown list-unstyled collapse  	{{#if this.actived}} show {{else}} {{/if}}">
												{{#each items}}
										
													<li class="sidebar-item {{#if actived}} active {{/if}}">													
														<a class="sidebar-link " href={{href}}>{{title}}</a>
													</li>
												{{/each}}
											</ul>
										{{/if}}
									</li>
								{{/each}}
							{{/if}}
						{{/each}}
					</script>
				</ul>

				<div class="sidebar-bottom d-none d-lg-block">
					<div class="media">
						<img class="rounded-circle mr-3" src="img/avatar.jpg" alt="Chris Wood" width="40" height="40">
						<div class="media-body">
							<h5 class="mb-1 text-white">Chris Wood</h5>
							<div class="text-light">
								<i class="fas fa-circle text-success"></i> Online
							</div>
						</div>
					</div>
				</div>

			</div>
		</nav>

		<div class="main">
			<nav class="navbar navbar-expand navbar-light bg-white">
				<a class="sidebar-toggle d-flex mr-2">
					<i class="hamburger align-self-center"></i>
				</a>

				<form class="form-inline d-none d-sm-inline-block">
					<input class="form-control form-control-no-border mr-sm-2" type="text"
						placeholder="Search projects..." aria-label="Search">
				</form>

				<ul class="navbar-nav">
					<li class="nav-item px-2 dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button"
							data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							服务菜单
						</a>
						<div class="dropdown-menu dropdown-menu-left dropdown-mega" aria-labelledby="servicesDropdown">
							<div class="d-md-flex align-items-start justify-content-start">
								<div class="dropdown-mega-list">
									<div class="dropdown-header">数据类分析项目</div>
									<a class="dropdown-item" href="#">Alerts</a>
									<a class="dropdown-item" href="#">Buttons</a>
									<a class="dropdown-item" href="#">Cards</a>
									<a class="dropdown-item" href="#">Carousel</a>
									<a class="dropdown-item" href="#">General</a>
									<a class="dropdown-item" href="#">Grid</a>
									<a class="dropdown-item" href="#">Modals</a>
									<a class="dropdown-item" href="#">Tabs</a>
									<a class="dropdown-item" href="#">Typography</a>
								</div>
								<div class="dropdown-mega-list">
									<div class="dropdown-header">业务结算清分</div>
									<a class="dropdown-item" href="#">Layouts</a>
									<a class="dropdown-item" href="#">Basic Inputs</a>
									<a class="dropdown-item" href="#">Input Groups</a>
									<a class="dropdown-item" href="#">Advanced Inputs</a>
									<a class="dropdown-item" href="#">Editors</a>
									<a class="dropdown-item" href="#">Validation</a>
									<a class="dropdown-item" href="#">Wizard</a>
								</div>
								<div class="dropdown-mega-list">
									<div class="dropdown-header">项目业务展板</div>
									<a class="dropdown-item" href="#">项目管理</a>
									<a class="dropdown-item" href="#">任务管理</a>
									<a class="dropdown-item" href="#">Table with Buttons</a>
									<a class="dropdown-item" href="#">Column Search</a>
									<a class="dropdown-item" href="#">Muulti Selection</a>
									<a class="dropdown-item" href="#">Ajax Sourced Data</a>
								</div>
								<div class="dropdown-mega-list">
									<div class="dropdown-header">预警服务</div>
									<a class="dropdown-item" href="#">Layouts</a>
									<a class="dropdown-item" href="#">Basic Inputs</a>
									<a class="dropdown-item" href="#">Input Groups</a>
									<a class="dropdown-item" href="#">Advanced Inputs</a>
									<a class="dropdown-item" href="#">Editors</a>
									<a class="dropdown-item" href="#">Validation</a>
									<a class="dropdown-item" href="#">Wizard</a>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="navbar-collapse collapse">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item dropdown">
							<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
								<div class="position-relative">
									<i class="align-middle" data-feather="message-circle"></i>
									<span class="indicator">4</span>
								</div>
							</a>
							<div id="messages" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
								aria-labelledby="messagesDropdown">
								<script id="script_messages" type="text/x-handlebars-template">
								<div class="dropdown-menu-header">
									<div class="position-relative">
											{{total}}  New Messages
									</div>
								</div>
								<div class="list-group">
									{{#each items}}
									<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">
												 
												<img src="{{avatar}}" class="avatar img-fluid rounded-circle" alt="{{who}}">
											</div>
											<div class="col-10 pl-2">
												<div class="text-dark">{{who}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
								 	{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all messages</a>
								</div>
								</script>
							</div>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
								<div class="position-relative">
									<i class="align-middle" data-feather="bell-off"></i>
								</div>
							</a>
							<div id="alerts" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
								aria-labelledby="alertsDropdown">
								<script id="script_alerts" type="text/x-handlebars-template">
									<div class="dropdown-menu-header">
									{{total}} New Notifications
								</div>
								<div class="list-group">
									{{#each items}}
										<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">
													<i class="text-danger" data-feather="alert-circle"></i>
											</div>
											<div class="col-10">
												<div class="text-dark">{{title}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
									{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all notifications</a>
								</div>
								</script>
							</div>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
								<span class="d-inline-block d-md-none">
									<i class="align-middle" data-feather="settings"></i>
								</span>
								<span class="d-none d-sm-inline-block">
									<img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1"
										alt="Chris Wood" /> <span class="text-dark">Chris Wood</span>
								</span>
							</a>
							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
								<a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="user"></i>
									Profile</a>
								<a class="dropdown-item" href="#"><i class="align-middle mr-1"
										data-feather="pie-chart"></i> Analytics</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Settings & Privacy</a>
								<a class="dropdown-item" href="#">Help</a>
								<a class="dropdown-item" href="#">Sign out</a>
							</div>
						</li>
					</ul>
				</div>
			</nav>

			<main class="content">
				<div class="container-fluid p-0">


					<div class="row">

						<div class="col-12 col-lg-12">
							<div class="card">
								<div class="card-header mb-2">
									<div class="card-actions float-right">
										<div class="btn-group">
											<button type="button" class="btn btn-primary dropdown-toggle"
												data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												操作
											</button>
											<div class="dropdown-menu">
												<a class="dropdown-item" href="./demo_客户_资产_应收账款_add.html">补充单据</a>
												<a class="dropdown-item"
													href="./demo_客户_资产_应收账款_Apply_Query.html">批量上传单据</a>
												<div class="dropdown-divider"></div>
												<a class="dropdown-item"
													href="./demo_客户_资产_应收账款_Apply_Query.html">已提交资产(状态)</a>
											</div>
										</div>
									</div>
						 
									<h5 class="card-title">回款流水信息</h5>
				 
								</div>
								<div class="card-body">
									<table class="table " id="example">
										<thead>
											<tr>
												<th style="width:10%">单据号码</th>
												<th style="width:10%">单据类型</th>
												<th style="width:10%">单据票面金额</th>
												<th style="width:15%">此次回款信息已匹配金额</th>
												<th style="width:15%">此次回款信息未匹配金额</th>
												<th style="width:15%">票据已回款比例</th>
												<th style="width:15%">资金回款方式</th>			 

												<th>详情</th>
											</tr>
										</thead>

									</table>
								</div>
								<script>
									document.addEventListener("DOMContentLoaded", function () {

										// 定义的数组,根据数组,渲染生成页面内容
										var arr = [
											['1110123123', '发票', 20000, 20000, 20000, '100%', 0, '正常', ''],
											['1110123124', '发票', 18000, 20000, 20000, '100%', 0, '正常', '有效', ''],
											['1110123125', '发票', 18000, 15000, 12000, '60%', 18000, '异常', ''],

										];

										// 定义变量,存储要写入的内容
										$('#example').DataTable({
											data: arr,
											"order": [
												[4, "desc"]
											],
											columns: [{
												title: "单据号码"
											},
											{
												title: "单据类型"
											},
											{
												title: "单据票面金额"
											},
											{
												title: "本次信息回款金额"
											},
											{
												title: "本次账户匹配金额"
											},
											{
												title: "本次实际回款比例",
												render: function (data, type, row, meta) {

													return type === 'display' ?
														`<td class="d-none d-xl-table-cell">
											  <div class="progress">
												<div class="progress-bar bg-primary" role="progressbar" style="width:${data};" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100">${data}</div>
											  </div>
											  </td>` : ''



												}
											},
											{
												title: "单据未核销金额"
											},

											{
												title: "单据状态"
											},
											{
												title: "详情",
												render: function (data, type, row, meta) {
													console.log(type)
													return type === 'display' ?
														`<td class="table-action"><a href="#"><i class="align-middle" data-feather="edit-2"></i></a><a href="#"><i class="align-middle" data-feather="eye"></i></a></td>` : ''
												}
											}
											]
										});

									});
								</script>
							</div>
						</div>
					</div>



			</main>

		</div>
	</div>
	</div>

	<script src="js/app.js"></script>

	<script src="js/libs/handlebars/handlebars.min-v4.7.7.js"></script>
	<script src="js/initMenuMessageAlert.js"></script>

	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function () {

			initSidebarMenu(2, 1, 0)

			var tpl_siderbar = $("#script_menu").html();
			var template_sdb = Handlebars.compile(tpl_siderbar);
			var content = template_sdb(menu_json_data);
			$("#sidebar-menu").html(content)

			//模版渲染	 
			var tpl_alerts = $("#script_alerts").html();
			var template_alt = Handlebars.compile(tpl_alerts);
			var content = template_alt(alerts);
			$("#alerts").html(content)



			//模版渲染
			var tpl_messages = $("#script_messages").html();
			var template_msg = Handlebars.compile(tpl_messages);
			var content = template_msg(messages);
			$("#messages").html(content)



		});
	</script>






</body>

</html>